<template>
  <div
    class="info-panel"
    @click="$global.navigate({ path: '/wallet/details' })"
  >
    <div class="gradient gradient-one"></div>
    <div class="gradient gradient-two"></div>
    <div class="gradient-main">
      <div class="title">
        <div class="title-text">总资产</div>
        <svg-icon icon-class="arrow-right" class="icon" />
      </div>
      <div class="balance">
        0.00
        <div class="sub">USDT</div>
      </div>
      <div class="address">
        <div class="address-text">
          0x880c852337c54e15338de06f7dc730bc135e362a
        </div>
        <svg-icon icon-class="copy" class="icon" />
      </div>
    </div>
    <div class="balance-view">
      <div class="balance-item">
        <div class="balance-item-label">WOO</div>
        <div class="balance-item-value">0.00</div>
      </div>
      <div class="balance-item">
        <div class="balance-item-label">WONE</div>
        <div class="balance-item-value">0.00</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    test: {
      type: String,
      default() {
        return "";
      },
      required: false,
    },
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.info-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .gradient {
    height: 20px;

    &.gradient-one {
      width: 96%;
      background: linear-gradient(to right, #9bb6e6, #88aae2);
      border-radius: 12px 12px 0 0;
    }
    &.gradient-two {
      width: 98%;
      background: linear-gradient(to right, #88b1f5, #5687de);
      border-radius: 12px 12px 0 0;
      margin-top: -8px;
    }
  }
  .gradient-main {
    width: 100%;
    box-sizing: border-box;
    padding: 24px;
    background: linear-gradient(to right, #034ed4, #4185f3);
    border-radius: 12px;
    margin-top: -8px;
    z-index: 2;
    position: relative;
    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 28px;
      color: #fff;
    }
    .balance {
      line-height: 1;
      font-size: 48px;
      color: #fff;
      display: flex;
      align-items: flex-end;
      padding: 20px 0;
      .sub {
        font-size: 28px;
        position: relative;
        top: -4px;
        margin-left: 10px;
      }
    }
    .address {
      font-size: 28px;
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .address-text {
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 10px;
        font-size: 40px;
      }
      .icon {
        font-size: 40px;
      }
    }
  }
  .balance-view {
    width: 100%;
    height: 120px;
    background-color: #2c2c2c;
    box-sizing: border-box;
    padding-top: 20px;
    margin-top: -20px;
    border-radius: 0 0 12px 12px;
    display: flex;
    .balance-item {
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      font-size: 28px;
      box-sizing: border-box;
      &:nth-child(1) {
        position: relative;
        &::after {
          content: "";
          height: 40%;
          width: 1px;
          background-color: #fff;
          position: absolute;
          bottom: 30px;
          right: 0;
        }
      }
      &-label {
        margin-right: 20px;
      }
    }
  }
}
</style>
